<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录日志</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css"/>
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-tab layui-tab-card">
            <ul class="layui-tab-title">
                <li class="layui-this">登录日志</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <table style="margin-top: 10px;" id="log-login-table" lay-filter="user-table"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>


<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'element'], function () {
        let table = layui.table;
        let form = layui.form;
        let element = layui.element;

        let MODULE_PATH = "/system/logging/";

        let cols = [
            [
                {
                    title: '行为', field: 'title', align: 'center', templet: function (d) {
                        return '登录'
                    }
                },
                {
                    title: '登录账号',sort:true, field: 'logUser', align: 'center'
                },
                {
                    title: '账号类型', field: 'userRole', align: 'center',sort:true, templet: function (d) {
                        if (d.userRole === '0') {
                            return '<span class="layui-badge layui-bg-green">管理员</span>'
                        } else if (d.userRole === '1') {
                            return '<span class="layui-badge layui-bg-blue">教师账号</span>'
                        }else {
                            return '<span class="layui-badge layui-bg-gray">学生账号</span>'
                        }
                    }
                },
                {title: '浏览器', field: 'broswerName', align: 'center'},
                {title: '操作地址', field: 'ipAdress', align: 'center'},
                {title: '操作系统', field: 'operateSystem', align: 'center'},
                {title: '访问时间', field: 'logTime', align: 'center',sort:true},
                {
                    title: '访问状态', align: 'center', templet: function (d) {
                        if (d.logStatus === '正常') {
                            return '<span class="layui-badge layui-bg-green">正常</span>'
                        } else {
                            return '<span class="layui-badge">登录异常</span>'
                        }
                    }, width: 150
                }
            ]
        ]


        table.render({
            elem: '#log-login-table',
            url: '/User/getLogRecords',
            page: {
                layout: ['count', 'prev', 'page', 'next', 'skip']
                , curr: 1
                , groups: 3
                , last: false
            },
            limit: 10,
            cols: cols,
            skin: 'line',
            toolbar: false,
            parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                let result;
                //console.log(JSON.stringify(res.data));
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                } else {
                    result = res.data.slice(0, this.limit);
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result //解析数据列表
                };
            }
        });

        form.on('submit(dict-type-query)', function (data) {
            table.reload('dict-type-table', {where: data.field})
            return false;
        });

        window.error = function (obj) {
            layer.open({
                type: 1,
                title: '异常信息',
                shade: 0,
                area: ['450px', '350px'],
                content: '<div class="pear-container"><div class="layui-card"><div class="layui-card-body">' + obj.data['error'] + '</div></div></div>'
            });
        }
    })
</script>
</html>